<template>
  <div class="container">
    <div class="search-box">
      <van-search
        :value='paramsData.keyword'
        placeholder="点击输入搜索内容"
        use-action-slot
        shape="round"
        @change="onChangeVal"
        @search="onSearch"
        :autofocus="true"
        ref="searchBox"
      >
        <div class="search-btn font-white" size="small" slot="action" @tap="onSearch2">搜索</div>
      </van-search>
    </div>
    <div class="height-54"></div>
    <div class="pad-l-10 pad-r-10 pad-t-13 pad-b-13">
      <div class="module-box">
        <template v-if="!dataNone">
          <ul>
            <li v-for="(item, index) in listData" :key="index"
              @click="pageTo(item)" class="flex">
              <div class="pic-box">
                <div class="width-124 height-124 pos-rel">
                  <!-- 跨境图标 -->
                  <div class="cross-border-pic">
                    <!-- 跨境保税 -->
                    <img
                      v-if="fileSpace && item.crossBorderType === 2 && item.crossBorderLabelType === 1"
                      :src="fileSpace + '/images/icon-cross-border.png'"
                      class="icon-cross-border"
                      alt="">
                    <!-- 海外直邮 -->
                    <img
                      v-if="fileSpace && item.crossBorderType === 2 && item.crossBorderLabelType === 2"
                      :src="fileSpace + '/images/icon-cross-border-22.png'"
                      class="icon-cross-border"
                      alt="">
                  </div>
                  <img v-if="item.imageUrl" class="img-main width-124 height-124"
                    :src="item.imageUrl + '?imageView2/1/w/690/h/690'" mode="aspectFill"/>
                </div>
                <template v-if="item.stock === 0">
                  <div class="del-layer stock-none">
                    <label>
                      <span>已售完</span>
                      <i class="font-9">SOLD OUT</i>
                    </label>
                  </div>
                  <div class="del-layer-bg"></div>
                </template>
              </div>
              <div class="detail-box flex-item">
                <div class="desc font-15 font-w mar-b-0">
                  {{ item.title }}
                </div>
                <div class="tag-number font-12 pad-l-4 pad-r-4 pad-t-2 pad-b-2">{{ item.wholesaleNum }}{{ item.unit }}起批</div>
                <div class="flex v-align-c mar-t-30 pad-t-2">
                  <label class="price flex-item" v-if="getCustomerId && getWholesaleAuthority">
                    <span class="font-15">￥</span>
                    <span class="font-23">{{ item.wholesalePrice }}</span>
                  </label>
                  <label class="price flex-item font-12" v-else>无权查看价格</label>
                  <p class="font-12">批发价</p>
                </div>
              </div>
            </li>
          </ul>
          <div v-if="pullLoad.finished && paramsData.currentPage > 2" class="pad-t-15 pad-b-15">
            <base-line title="到底了" txtColor="#aaaaaa" lineColor="#bbbbbb"></base-line>
          </div>
        </template>
      </div>
    </div>
    <div class="nodata" v-if="searchNull">
        <img v-if="fileSpace" :src="fileSpace + '/images/shop-nodata.png'" class="width-375 height-91" alt="">
        <div class="align-c mar-t-20 font-16 font-color-6">
        暂时还没有您搜索的内容~
        </div>
    </div>
  </div>
</template>
<script>
import baseLine from '@/components/BaseLine/index'
import { pageUserGoodsAndProjectGoods } from '@/api/shop'
export default {
  components: { baseLine },
  data() {
    return {
      paramsData: {
        currentPage: 1,
        size: 10,
        memberId: '', // 店主ID
        customerId: '', // 访问者ID
        keyword: ''
      },
      pullLoad: {
        loading: false,
        finished: false
      },
      listData: [],
      searchNull: false // 搜索数据是否为空
    }
  },
  onLoad() {
    // 初始化data
    Object.assign(this.$data, this.$options.data())
  },
  onReachBottom() {
    // 触底刷新
    if (!this.pullLoad.finished) {
      this.pageinit()
    }
  },
  methods: {
    pageinit() {
      this.paramsData.memberId = this.getMemberId
      this.paramsData.customerId = this.getCustomerId
      pageUserGoodsAndProjectGoods(this.paramsData).then(response => {
        if (response.isError) return
        response.data.records.forEach((item) => {
          this.listData.push(item)
        })
        if (this.listData.length === 0) {
          this.searchNull = true
        }
        this.paramsData.currentPage++
        if (this.listData.length === 0 || this.listData.length >= response.data.total) {
          this.pullLoad.finished = true
        }
      })
    },
    resetData() {
      // 重置数据
      this.searchNull = false
      this.paramsData.currentPage = 1
      this.listData = []
      this.pullLoad.finished = false
    },
    onSearch(e) {
      // 键盘直接搜索点击事件
      this.paramsData.keyword = e.mp.detail
      this.resetData()
      this.pageinit()
    },
    onChangeVal(e) {
      this.paramsData.keyword = e.mp.detail
    },
    onSearch2() {
      // 搜索按钮点击事件
      this.resetData()
      this.pageinit()
    },
    pageTo(item) {
      // 跳转详情页
      this.$pt.navigateTo({url: '/pages/shop/detail/main?goodsId=' + item.goodsId + '&goodsType=' + item.goodsType})
    }
  }
}
</script>
<style lang="less" scoped>
.search-box {
  width: 100%;
  position: fixed;
  top: 0;
  left: 0;
  background: #ff6529;
  z-index: 9;
  // 对搜索框进行改造
  /deep/ .van-search{
    background: #ff6529!important;
  }
  /deep/ .van-search__action{
    background: #ff6529!important;
    font-weight: normal!important;
    font-size: 14px!important;
  }
  /deep/ .van-search--show-action {
    background: unset !important;
    padding-right: unset;
  }
  /deep/ .van-cell {
    background: #f4f4f4;
    border-radius: 25px;
  }
  /deep/ .van-search__action {
    background: white;
    font-size: 20px;
    color: #333333;
    font-weight: bold;
  }
}
.main {
  .main-bar {
    position: relative;
    padding: 0 15px 20px;
    margin-top: 10px;
    .shop-bar {
      display: flex;
      justify-content: left;
      align-items: center;
      padding: 10px 13px;
      box-shadow: 0 4px 10px #dddddd;
      margin-top: 10px;
      border-radius: 5px;
      &:first-child{
        margin-top: unset;
      }
      .img-item-box {
        width: 100px;
        height: 100px;
        .img-item {
          width: 100px;
          height: 100px;
        }
        .sell-out{
          position: absolute;
          width: 100%;
          height: 100%;
          left: 0;
          top: 0;
          display: flex;
          justify-content: center;
          align-items: center;
          overflow: hidden;
          color: rgba(254, 254, 254, .7);
          background: rgba(0, 0, 0, 0.5);
          font-size: 12px;
          .del-layer{
            border-radius: 50%;
            border: 1px solid white;
            justify-content: center;
            width: 60px;
            height: 60px;
          }
          .delete-css{
            position: absolute;
            transform: rotate(-45deg);
            background: rgba(255,255,255,0.58);
            height: 20px;
            line-height: 20px;
            font-size: 12px;
            width: 100%;
            text-align: center;
            color: #000;
          }
        }
      }
      .content-item-box {
        width: 209px;
        height: 90px;
        padding: 5px 0;
        margin-left: 10px;
        // display: flex;
        // flex-direction: column;
        // justify-content: space-between;
        .content-title {
          font-size: 14px;
          line-height: 18px;
          color: #333;
        }
        .content-foot {
          margin-top: 20px;
          .self-buy {
            height: 15px;
            text-align: center;
            display: flex;
            justify-content: left;
            align-items: center;
            .self-buy-left {
              background: #ffe200;
              font-size: 10px;
              color: #333;
              padding: 0 4px;
            }
            .self-buy-right {
              background: #000000;
              font-size: 10px;
              color: #fff;
              padding: 0 4px;
            }
          }
          .price-row {
            .price-box {
              display: flex;
              justify-content: left;
              align-items: flex-end;
              .price {
                font-size: 19px;
                color: #ff0000;
                line-height: 1;
              }
              .old-parice {
                font-size: 12px;
                color: #333;
                text-decoration: line-through;
                margin-left: 5px;
                line-height: 1;
              }
            }
          }
        }
      }
    }
    .nodata {
      margin-top: 135px;
    }
  }
}
.module-box{  
    .title-bar{
      h2{
        margin: 0;
        padding: 0;
      }
    }
    ul{
      padding: 0;
      margin: 0; 
      &:after{
        content: '';
        display: block;
        clear: both;
        font-size: 0;
      }
      li{
        list-style-type: none;
        background: #fff;
        border-radius: 6px;
        margin-bottom: 10px;
        &:last-child{
          margin-bottom: 0px;
        }
        .detail-box{
          padding: 10px 10px 0 10px;
        }
        .pic-box{
          position: relative;
          z-index: 1;
          .img-main{
            border-top-left-radius: 6px;
            border-bottom-left-radius: 6px;
          }
          .del-layer-bg{
            border-top-left-radius: 6px;
            border-top-right-radius: 6px;
            display: block;
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.6);
            z-index: 5;
          }
          .del-layer{
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            z-index: 6;
            text-align: center;
            color: #fff;
            display: block;
            label{
              width: 58px;
              height: 58px;
              line-height: 1;
              margin-top: 25%;
              font-size: 15px;                  
              // background: rgba(4, 4, 4, 0.6);
              border: rgba(255, 255, 255, 0.6) 1px solid;
              border-radius: 100px;            
              display: inline-block;
              span{
                display: block;
                margin-top: 16px;
              }
              i{
                display: block;
                margin-top: 3px;
                color: rgba(255, 255, 255, 0.8);
              }
            }
            p{
              display: block;
              font-size: 10px;
              margin-top: 5%;
            }
          }
        }        
        .tag-number{
          background: #ffeee6;
          color: #FE7329;
          line-height: 1;
          display: inline-block;
        }
        .desc{
          height: 20px;
          line-height: 1.3;
          overflow:hidden;
          text-overflow:ellipsis;
          display:-webkit-box;
          -webkit-line-clamp:1;
          -webkit-box-orient:vertical;
          word-break:break-word;
        }
        .price{
          color: #FF5742;
        }
        p{
          color: #A8A8A8;
        }
      }
    }
  }
.nodata {
  margin-top: 115px;
}
</style>
